<template>
  <el-card shadow="never" class="aui-card--fill">
    <el-form ref="form" :inline="true" :model="dataForm">
      <el-form-item>
        <el-select v-model="dataForm.status" clearable>
          <el-option
            :label="data.label"
            v-for="data in status"
            :key="data.value"
            :value="data.value"
            >{{ data.label }}</el-option
          >
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">{{ $t("query") }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="reset()">重置</el-button>
      </el-form-item>
      <!-- <el-form-item>
        <el-button type="danger" @click="deleteHandle()">{{
          $t("deleteBatch")
        }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="read()">标记已读</el-button>
      </el-form-item> -->
    </el-form>
    <div class="table-top">
      <div class="left">
        <div class="top-line"></div>
        意见反馈列表
      </div>
      <div class="right">
        <div class="table-top-btn" @click="deleteHandle()">删除</div>
        <div class="table-top-btn" @click="read()">标记已读</div>
      </div>
    </div>
    <el-table
      ref="table"
      v-loading="dataListLoading"
      :data="dataList"
      border
      stripe
      @selection-change="dataListSelectionChangeHandle"
      style="width: 100%"
    >
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50"
      ></el-table-column>
      <el-table-column
        type="index"
        label="序号"
        header-align="center"
        align="center"
        width="50"
      ></el-table-column>
      <el-table-column
        prop="username"
        label="反馈账号"
        header-align="center"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="content"
        label="反馈内容"
        header-align="center"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="phone"
        label="联系方式"
        header-align="center"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="createTime"
        label="接收时间"
        header-align="center"
        align="center"
      ></el-table-column>
      <el-table-column label="状态" header-align="center" align="center">
        <template slot-scope="scope">
          <span :class="{ blue: scope.row.status == 1 }">
            {{
              scope.row.status == 1
                ? "未读"
                : scope.row.status == 2
                ? "已读"
                : "已处置"
            }}
          </span>
        </template>
      </el-table-column>

      <el-table-column
        :label="$t('handle')"
        fixed="right"
        header-align="center"
        align="center"
        width="150"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status !== '3'"
            type="text"
            size="small"
            @click="handle(scope.row.id)"
            >处置</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="limit"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="pageSizeChangeHandle"
      @current-change="pageCurrentChangeHandle"
    >
    </el-pagination>
    <Handle ref="handle" @close="getDataList" @submit="getDataList" />
  </el-card>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
import Handle from "./component/handle.vue";
export default {
  mixins: [mixinViewModule],
  components: { Handle },
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: "/cgjybzMine/feedbackList",
        getDataListIsPage: true,
        deleteURL: "/cgjybzMine/deleteFeedback",
        deleteIsBatch: true,
      },
      dataForm: {
        status: null,
      },
      status: [
        {
          label: "已读",
          value: 2,
        },
        {
          label: "未读",
          value: 1,
        },
        {
          label: "已处置",
          value: 3,
        },
      ],
    };
  },
  methods: {
    handle(id) {
      this.$refs["handle"].show(id);
    },
    // 重置
    reset() {
      this.dataForm = {
        status: null,
      };
      this.getDataList();
    },
    // 已读
    read() {
      if (this.dataListSelections.length == 0) {
        this.$message.warning("请选择意见反馈项");
      } else {
        let idArr = this.dataListSelections.reduce((prev, cur) => {
          prev.push(cur.id);
          return prev;
        }, []);
        this.dataListLoading = true;
        this.$http
          .get(`cgjybzMine/updateStatus?ids=${idArr.join(",")}`)
          .then((res) => {
            if (res.code !== 0) {
              this.$message.error(res.msg);
            } else {
              this.$message.success("操作成功");
            }
          })
          .finally(() => {
            this.$refs["table"].clearSelection();
            this.getDataList();
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.blue {
  color: #3d76cc;
}
</style>
